<template>
  <el-container class="details-container">
    <el-header height="70px">
      <Navigation />
    </el-header>

    <el-main style="padding-top:70px;">
      <Label />
      <!-- 培训 -->
      <div class="train">
        <div class="container">
          <div class="train-title">
            <h1>建材职业能力培训中心</h1>
            <h3>懒精灵建材行业职业能力培训基地</h3>
            <p>(墙体艺术涂装师)</p>
          </div>
        </div>
      </div>

      <!-- 培训内容 -->
      <div class="train-content">

        <div class="container">
          <p class="p-content">建筑材料行业职业技能鉴定指导中心与中国建筑装饰装修材料协会建筑涂料分会、硅藻泥分会在2020年3月共同设立了“
            墙体艺术涂装师”职业能力工种，这是适应稳就业政策而设立的一个新的职业能力工种，也是唯一一个针对“内墙涂装”而设立的职业工种。经墙体艺术涂装师职业技能评价标准编写委员会研究决定，长沙美家乐装饰材料有限公司为编写委员会编制单位。
          </p>
          <p class="p-title">培训内容</p>
          <div class="train-box">
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/card01.png" alt="">
              <div class="train-text">
                <p class="p-color">艺术涂料墙艺师</p>
                <p class="p-color">Artistic CoatingArtist</p>
                <p>
                  随着时代的发展，人们审美和生活品质的逐渐提升，环保、安全、性价比高的墙面材料---艺术涂料已深入到我们生活中的各个角落，不仅是家装，更包含大量的餐厅、售楼部、影院、游乐场所等工装都有艺术涂料的身影。当前装修环境对墙体艺术涂装师有大量的需求。
                </p>
              </div>

            </div>
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/card02.png" alt="">
              <div class="train-text">
                <p class="p-color">墙体彩绘师</p>
                <p class="p-color">Wall painter</p>
                <p>
                  墙体彩绘是对艺术涂料的升级，在整个家装当中占有非常重要的地位。通过墙面彩绘来体现出一种人文的风格, 提升整个家庭装修的档次,同
                  时实现人们的个性化、多元化。满足人们对物质生活的提高的愿望，增加生活情趣。随着时代的不断进步，墙体彩绘在近几年里将立足于人们
                  的家居等系列墙体装修，从此大行其道、越走越好。
                </p>
              </div>
            </div>
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/card03.jpg" alt="">
              <div class="train-text">
                <p class="p-color">墙体浮雕</p>
                <p class="p-color">Wall reliefs</p>
                <p>
                  是高端定制里面的高端定制，与木雕、砖雕一起合称为家装的灵魂。是装饰装修里面业主精神思想的最高表现形式。是脱离实际应用后的人文精
                  神体现，不仅是满足个人的思想表达，更能成为家族核心精神的具象表达的载体。随着社会发展和生活水平的提高其发展前景巨大。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 师资介绍 培训结业 -->
      <div class="train-introduce">
        <div class="train-bg1">
          <div class="introduce-box">
            <p class="p-color">师资介绍</p>
            <p>由人社部授权，多位设计师发起，多家装饰公司共同合作而开设墙体艺术涂装师培训课程。依托中国美院和多所美术院校，多家艺术品公司和雕塑公司参与，拥有庞大的教师队伍和施工团队。</p>
            <p class="border">一级工艺美术师</p>
            <p>2人</p>
            <p>高级讲师</p>
            <p>4人</p>
          </div>
        </div>
        <div class="train-bg2">
          <div class="train-box">
            <p class="p-color">师资介绍</p>
            <p>由人社部授权，多位设计师发起，多家装饰公司共同合作而开设墙体艺术涂装师培训课程。依托中国美院和多所美术院校，多家艺术品公司和雕塑公司参与，拥有庞大的教师队伍和施工团队。</p>
          </div>
        </div>
      </div>

      <!-- 在线报名 -->
      <div class="signUp">
        <div class="container">
          <div class="signUp-content">
            <p class="p-border">我要报名</p>
            <div class="signUp-title">
              <h2>在线咨询</h2>
              <p>点击在线咨询</p>
              <p>每周一至周五，上午9点至下午5点，培训招生客服提供培训在线问题解答。</p>
            </div>
            <div class="signUp-form">
              <h2>现在报名</h2>
              <p>提交报名资料，1个工作日内招生专人对接报名服务工作</p>
              <div class="signUp-input">
                <el-form :model="dataForm" ref="addFormRef" :rules="addFormRules" label-position="top"
                  label-width="70px">
                  <el-form-item label="您的称呼*" prop="username">
                    <el-input v-model="dataForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话*" prop="phone">
                    <el-input v-model="dataForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="电子邮件*" prop="email">
                    <el-input v-model="dataForm.email"></el-input>
                  </el-form-item>
                </el-form>
                <el-button type="primary" style="margin-bottom:20px" @click="JoinAdd">提交</el-button>
              </div>
            </div>
          </div>
          <div class="content-img">
            <img class="img-people" src="../../assets/images/signup/people.png" alt="">
          </div>
        </div>
      </div>

    </el-main>

    <el-footer style="padding:0;">
      <Footer style="background-color:#000000;" />
    </el-footer>

  </el-container>
</template>

<script>
// components
//common
import Navigation from '@/components/common/navigation/Navigation2.vue'
import Footer from '@/components/common/footer/Footer.vue'
// import Footer from '@/components/common/footer/Footer.vue'
import Label from '@/components/common/label/Label3.vue'
import './base.css'

import { postJoinAdd } from '@/api/data'
export default {
  components: {
    Navigation,
    Footer,
    Label,
  },
  data () {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (regEmail.test(value)) {
        //合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }

    //验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

      if (regMobile.test(value)) {
        //合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      dataForm: {
        name: "",
        phone: "",
        email: ""
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入用户手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    JoinAdd () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        //校验成功后发起添加用户的网络请求
        // this.debounce()
        const { data: res } = await postJoinAdd(this.dataForm)
        if (res.meta.status !== 200) return this.$message({
          type: 'error',
          message: '添加用户失败',
          offset: 100
        })
        this.$message.success({
          message: '添加用户成功',
          type: 'success',
          offset: 100
        })


      })

    },
    debounce () {
      let timeOut = null;
      let time = 5000
      console.log(1)
      return () => {
        if (timeOut) clearTimeout(timeOut)
        timeOut = setTimeout(() => {
          console.log(1)
        }, time)

      }
    }
  },
  mounted () {

  }
}
</script>

<style lang='less' scoped>
.details-container {
  position: relative;
  .el-header {
    position: fixed;
    top: 0;
    z-index: 10000;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.el-header {
  background-color: var(--color-background);
}

.el-main {
  padding: 0;
  background: #f8f8f8;
  overflow: hidden;
  .train {
    background: url("https://img.xnxx.mengcreate.com/LJL/train1.png") no-repeat;
    background-size: cover;
    height: 240px;
    .container {
      .train-title {
        padding-top: 3rem;
        color: #fff;
        h1 {
          color: #065f46;
        }
      }
    }
  }
  .train-content {
    .container {
      .p-content {
        font-size: 1rem;
        line-height: 1.6rem;
      }
      .p-title {
        color: #23886c;
        font-weight: 500;
        border-bottom: 1px solid #23886c;
        display: inline-block;
        padding-bottom: 0.5rem;
      }
      .train-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .train-card {
          background: #fff;
          width: 386px;
          .train-text {
            padding: 0rem 1rem 0;
            .p-color {
              color: #23886c;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 1rem;
            }
            p {
              line-height: 1.6rem;
            }
          }
        }
      }
    }
  }
  .train-introduce {
    display: flex;

    .p-color {
      color: #23886c;
      font-weight: 500;
      border-bottom: 1px solid #23886c;
      display: inline-block;
      padding-bottom: 0.4rem;
    }
    p {
      // color: #ffff;
      line-height: 1.6rem;
      font-weight: 500;
    }
    .train-bg1 {
      width: 50%;
      background: url(https://img.xnxx.mengcreate.com/LJL/train3.png) no-repeat;
      background-size: cover;
      height: 84vh;
      background-position: center;
      .introduce-box {
        float: right;
        width: 600px;
        color: #fff;
        padding-right: 20px;
        .border::before {
          content: "";
          display: block;
          width: 1.6rem;
          height: 1px;
          background: #fff;
          margin-bottom: 1rem;
        }
      }
    }
    .train-bg2 {
      width: 50%;
      background: url(https://img.xnxx.mengcreate.com/LJL/train2.png) no-repeat;
      background-size: cover;
      height: 84vh;
      background-position: bottom;
      .train-box {
        width: 600px;
        padding-left: 20px;
      }
    }
  }
  .signUp {
    background: #6ca823;

    .container {
      display: flex;
      color: #fff;
      height: 800px;
      align-items: center;
      .signUp-content {
        .p-border {
          border-bottom: 1px solid #fff;
          display: inline-block;
          font-weight: 500;
          padding-bottom: 0.4rem;
        }
        .signUp-title {
          margin-bottom: 6rem;
        }
        .signUp-form {
          .signUp-input {
            display: flex;
            flex-direction: column;
            .el-input {
              margin: 10px 0;
              width: 50%;
              input {
                background: transparent !important;
              }
            }
            .el-button {
              width: 20%;
            }
            .el-button:hover {
              background: #fff !important;
              color: #74b828 !important;
              border: #74b828 !important;
            }
          }
        }
      }
    }
  }
}
.el-form-item {
  // margin-bottom: 20px;
}
@media only screen and (max-width: 786px) {
  .container {
    max-width: 786px;
    width: 100%;
    padding: 0 20px;
    overflow: hidden;
    .train-box {
      flex-direction: column;
    }
  }
  .el-main {
    .train {
    }
    .container-label {
      padding: 1rem 20px !important;
    }

    .train-introduce {
      flex-direction: column;
      .train-bg1 {
        width: 100%;
        .introduce-box {
          padding: 0 20px;
          width: 100%;
        }
      }
      .train-bg2 {
        width: 100%;
        background-position: 18% center;
        .train-box {
          width: 100%;
          padding: 0 20px;
          margin-bottom: 20px;
        }
      }
    }
    .signUp {
      .container {
        flex-direction: column;
      }
    }
  }
}
</style>